<template>
<div>

        <h3>评论({{len}})</h3>
        <div class="mycomment">
            <img :src="myInfo.user_img" alt="" class="cover" v-if="myInfo.user_img">
            <img src="@/assets/mengxiang.jpg" alt="" class="cover" v-else>
            <van-field
                rows="1"
                autosize
                type="textarea"
                placeholder="请输入留言"
                class="conmentArea"
                ref="postInput"
                v-model="commentContent"
            />
            <van-button type="primary" class="fabiao" @click="cmmentPublish">发表</van-button>
        </div>

</div>
</template>

<script>

   

export default {
    data() {
        return {
           myInfo:{},
           commentContent:''
        };
    },
    props:['len'],

    methods: {
       async myUserInfo(){
           const res = await this.$http.get('/user/'+ localStorage.getItem('id'))
        //    console.log(res.data[0]);//我的信息
           
           this.myInfo = res.data[0]
       },

       cmmentPublish(){
           
           if(this.myInfo.user_img && !localStorage.getItem('token') &&!localStorage.getItem('id')){
               confirm("未登录状态不能发表评论哦！");
               return
           }    
        //    if(this.commentContent.length>0){
               this.$emit("postcomment",this.commentContent)
               this.commentContent = ''
        //    }

       },


       focusInput(){
           // console.log(this.$refs.postInput.$el);
           this.$refs.postInput.focus()
        
       }

    },

    updated(){
        // this.focusInput()
    },

    created(){
        if(localStorage.getItem('token')){
            this.myUserInfo()
        }

    },


    components:{
        
    }


    }
</script>


<style scoped lang="less">

    .mycomment{
        display: flex;
        background-color: #fff;
        width: 100%;
        margin-bottom: 4vw;

        .cover{
            width: 9.333vw;
            height: 9.333vw;
            border-radius: 9.333vw;
            margin-left:1.333vw;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 0.8vw solid #fff;
        }
        .conmentArea{
            width: 63.667vw;
            margin-left: 2.133vw;
        }
       
        .conmentArea:before{
            content: "|"; 
            width: 2.667vw;
            height: 5.333vw;
            color: #fb7299;
            font-size: 5.333vw;
        }
        .fabiao{
            margin-left: 4.8vw;
        }
    }




</style>